<template>
    <div>
        <el-card>
            <!-- 搜索 -->
            <el-form label-width="80px" :model="formLabelAlign" class="sdf">
                <el-form-item label="姓名">
                    <el-input v-model="formLabelAlign.name" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="formLabelAlign.email" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="formLabelAlign.phone" style="width:200px"></el-input>
                </el-form-item>
                <div class="b">
                    <el-button type="primary" size="mini">查询</el-button>
                </div>
            </el-form>
            <!-- 添加 -->
            <div class="c">
                <el-button type="primary" size="mini" @click="dialogVisible = true">添加</el-button>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" height="250" border>
                <!-- 姓名 -->
                <el-table-column fixed prop="date" label="姓名"></el-table-column>
                <!-- 邮箱 -->
                <el-table-column prop="name" label="邮箱"></el-table-column>
                <!--手机号  -->
                <el-table-column prop="province" label="手机号"></el-table-column>
                <!-- 状态 -->
                <el-table-column prop="city" label="状态">
                    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-table-column>
                <!-- 创建时间 -->
                <el-table-column prop="address" label="创建时间"></el-table-column>
                <!-- 更新时间 -->
                <el-table-column prop="zip" label="更新时间"></el-table-column>
                <!-- 操作 -->
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="sc(scope.row)" type="primary" size="small">删除</el-button>
                        <el-button type="primary" size="small" @click="xg(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 对话框 -->
            <el-dialog title="添加" :visible.sync="dialogVisible" width="50%">
                <el-form label-width="80px" :rules="rules" :model="addLabelAlign">

                    <el-form-item label="姓名" prop="date">
                        <el-input v-model="addLabelAlign.date" style="width:600px"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="name">
                        <el-input v-model="addLabelAlign.name" style="width:600px"></el-input>
                    </el-form-item>

                    <el-form-item label="电话" prop="address">
                        <el-input v-model="addLabelAlign.address" style="width:600px"></el-input>
                    </el-form-item>
                </el-form>


                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'A1My',
    data() {
        return {
            // 对话框的打开状态
            dialogVisible: false,
            // 状态的打开状态
            value: true,
            // 添加的数组
            addLabelAlign: [],
            // 表格
            formLabelAlign: {},
            // 表格
            tableData: [
                {
                    date: '123gy1',
                    name: 'gy123@qq.com',
                    province: '',
                    address: new Date().toLocaleDateString(),
                    zip: new Date().toISOString()
                },
                {
                    date: '123gy1',
                    name: 'gy123@qq.com',
                    province: '',
                    address: new Date().toLocaleDateString(),
                    zip: new Date().toISOString()
                },
                {
                    date: '123gy1',
                    name: 'gy123@qq.com',
                    province: '',
                    address: new Date().toLocaleDateString(),
                    zip: new Date().toISOString()
                },
                {
                    date: '123gy1',
                    name: 'gy123@qq.com',
                    province: '',
                    address: new Date().toLocaleDateString(),
                    zip: new Date().toISOString()
                },
                {
                    date: '123gy1',
                    name: 'gy123@qq.com',
                    province: '',
                    address: new Date().toLocaleDateString(),
                    zip: new Date().toISOString()
                },
                {
                    date: '123gy1',
                    name: 'gy123@qq.com',
                    province: '',
                    address: new Date().toLocaleDateString(),
                    zip: new Date().toISOString()
                },
                {
                    date: '123gy1',
                    name: 'gy123@qq.com',
                    province: '',
                    address: new Date().toLocaleDateString(),
                    zip: new Date().toISOString()
                },
            ],
            // 页码
            current: 5,
            // 校验
            rules: {
                date: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入创建时间', trigger: 'blur' },
                ],
            }
        };
    },
    mounted() {

    },
    methods: {
        // 删除
        sc() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(0, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        xg() {

        }
    },
};
</script>

<style   scoped>
.sdf {
    display: flex;
}

.b {
    margin-left: 20px;
}

.c {
    margin-left: 40px;
}
</style>